<template>
    <div class="login" >
        <div class="goBack" v-if="showState">
          <div class="goBack-box"  @click="gotoUp">
              <i class="iconfont  icon-zuojiantou"></i> <span>返回</span>
          </div>
      </div>
        <div class="res_box" >
            <div class="res_hd">用户登录</div>
            <div class="res_hd_tp"><span >还未注册?</span><span  @click.stop="reShowLogin">注册</span></div>
            <div class="message"><p>{{tips}}</p></div>
            <div class="res_content">
                <form autocomplete="off">
                    <div class="item">
                        <label > 用户名</label>
                        <div class="item_info">
                            <input type="text" placeholder="请设置用户名" v-model.trim="username"  @blur="userCheck" name="username" v-focus >
                        </div>
                    </div>
                    <div class="item">
                        <label > 密 &nbsp; 码</label>
                        <div class="item_info">
                            <input type="password" placeholder="请设置登录密码" v-model.trim="password" @blur="pwdCheck" name="password" v-focus  >
                        </div>
                    </div>
                    <div class="item">
                        <input class="reg_submit" type="submit" value="登录"  @click.prevent="userLogin" >
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import http from '../../util/http'
import scroll from '@/util/scroll'
import { ElMessage } from 'element-plus'
// import { h } from 'vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      tips: '',
      screenWidth: document.body.clientWidth, // 窗口当前的可视宽度
      showState: false // 显示隐藏返回键
    }
  },
  mounted () {
    // 跳转登录页
    this.isLogin(false)
    this.getNowWidth()
  },
  methods: {
    ...mapMutations(['isLogin', 'UserData']),
    // 获取屏幕宽度
    async getNowWidth () {
      this.screenWidth = await scroll.getClientWidth()

      if (this.screenWidth <= 540) {
        this.showState = true
      } else if (this.screenWidth > 540) {
        this.showState = false
      }
    },
    // 点击登录字符显示登录
    reShowLogin () {
      this.$router.push('/login/registeruser')
    },
    // 校验用户名
    userCheck () {
      const reg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,13}$/
      if (this.username === '') {
        this.tips = '用户不能为空！'
      } else if (!reg.test(this.username)) {
        this.tips = '用户名只能是中文、英文、数字长度在3~14之间！'
      } else {
        this.tips = ''
      }
    },
    // 校验密码
    pwdCheck () {
      const reg = /^[a-zA-Z]\w{5,17}$/
      if (this.password === '') {
        this.tips = '密码不能为空！'
      } else if (!reg.test(this.password)) {
        this.tips = '密码以字母开头,只能含字母、数字和下划线,长度在6~18之间！'
      } else {
        this.tips = ''
      }
    },
    // 提交前校验
    userLogin () {
      const data = {
        username: this.username,
        password: this.password
      }
      const regPwd = /^[a-zA-Z]\w{5,17}$/
      const regUser = /^[\u4E00-\u9FA5A-Za-z0-9]{1,13}$/
      if (data.username === '') {
        this.tips = '用户不能为空！'
      } else if (!regUser.test(data.username)) {
        this.tips = '用户名只能是中文、英文、数字长度在2~14之间！'
      } else if (data.password === '') {
        this.tips = '密码不能为空！'
      } else if (!regPwd.test(data.password)) {
        this.tips = '密码以字母开头,只能含字母、数字和下划线,长度在6~18之间！'
      } else {
        // 登陆验证
        http.userLogint(data).then(res => {
          const { ok, message, user } = res.data
          console.log(res.data)
          if (ok === 1) {
            console.log(message)
            // 登录成功赋空
            this.username = ''
            this.password = ''
            this.tips = ''
            if (this.$route.query.redirect) {
              console.log(this.$route.query.redirect)
              // 跳转回上一路由(进入登录页的上一个页面)
              this.$router.push(this.$route.query.redirect)
            } else {
              this.$router.push({ path: '/home' })
            }

            // 存储登录用户的信息
            this.UserData(user)
            this.open2()
          } else if (ok === 0) {
            console.log(message)
          }
        })
      }
    },
    // 登录成功
    open2  () {
      ElMessage({
        message: '登录成功',
        type: 'success'

      })
    },
    // 返回上一页面
    gotoUp () {
      this.$router.go(-1)
    }

  },
  directives: {
    focus: {
      mounted (el) {
        const father = el.parentNode
        el.onfocus = function () {
          father.className = 'item_info_focus item_info'
        }
        el.onblur = function () {
          father.className = 'item_info '
        }
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.login{
    width: 100%;
    height: 100vh;
    display: block;
    background-image: url("../../../public/b1.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    .goBack{
      width: 11.22rem;
      height: 1rem;
      line-height: 1rem;
      .goBack-box{
        width: 2rem;
        padding: 0 0.6rem;

        span,i{
           font-size: .4rem;
           font-weight: bold;
        }
      }

    }
    .res_box{
        width: 450px;
        height: 450px;
        background: rgba(255,255,255,.8 );
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 25px;
        border-radius: 20px;
        .res_hd{
            color: #000;
            font-size: 30px;
            font-weight: 700;
        }
        .res_hd_tp{
            margin-top: 6px;
            margin-bottom: 10px;
            span{
              font-size: 14px;
              &:nth-of-type(1){
                color: #666;
                margin-right: 6px;
              }
              &:nth-of-type(2){
                cursor: pointer;
                color: rgb(237, 117, 37);
                &:hover{
                  color: #f60;
                  text-decoration: underline;
                }
              }
            }
        }
        .message{
          width: 100%;
          height: 20px;
          padding: 0 5px;
          font-size: 12px;
          text-align: center;
          color: red;
        }
        .res_content{
            margin-top: 10px;
            .item{
                margin-bottom: 35px;
                display: block;
                label{
                    font-size: 14px;
                    color: #666;
                }

                .item_info{
                    display: inline-block;
                    padding: 10px;
                    border: 1px solid #e4e4e4;
                    box-sizing: border-box;
                    margin-left: 25px;
                    background: #fff;
                    border-radius: 5px;
                    transition: all 0.3s;
                    &:hover{
                      border: 1px solid #c9c9c9;
                    }
                    input{
                        border: none;
                        width: 360px;
                        &:focus{outline:none;}
                        &::placeholder {
                        color: #d4d4d4;
                        }
                    }
                }
                .item_info_focus{
                  border: 1px solid #f60 !important;
                }

                .reg_submit{
                    cursor: pointer;
                    border: none;
                    display: inline-block;
                    width: 100%;
                    background: #f60;
                    padding: 5px;
                    font-size: 24px;
                    border-radius: 25px;
                    flex-wrap: 600;
                    color: white;
                     transition: all 0.5s;
                    &:hover{
                      opacity: .8;
                    }
                }
            }
        }
    }
    @media screen  and (max-width:540px) {
    .res_box{
        width: 9.35rem;
        height: 9.35rem;

        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%,-55%);
        padding: 25px;
        border-radius: 20px;
        .res_hd{
            color: #000;
            font-size: .6rem;
            font-weight: 700;
            text-align: center;
        }
        .res_hd_tp{
            margin-top: 6px;
            margin-bottom: 10px;
            span{
              font-size: 14px;
              &:nth-of-type(1){
                color: #666;
                margin-right: 6px;
              }
              &:nth-of-type(2){
                cursor: pointer;
                color: rgb(237, 117, 37);
                &:hover{
                  color: #f60;
                  text-decoration: underline;
                }
              }
            }
        }
        .message{
          width: 100%;
          height: 20px;
          padding: 0 5px;
          font-size: 12px;
          text-align: center;
          color: red;
        }
        .res_content{
            margin-top: 10px;
            .item{
                margin-bottom: .75rem;
                display: block;
                label{
                    font-size: 14px;
                    color: #666;
                    display: none;
                }

                .item_info{
                    display: inline-block;
                    padding: 10px;
                    border: 1px solid #e4e4e4;
                    box-sizing: border-box;
                    margin-left: 25px;
                    background: #fff;
                    border-radius: 5px;
                    transition: all 0.3s;
                    &:hover{
                      border: 1px solid #c9c9c9;
                    }
                    input{
                        border: none;
                        width: 7.5rem;
                        &:focus{outline:none;}
                        &::placeholder {
                        color: #d4d4d4;
                        }
                    }
                }
                .item_info_focus{
                  border: 1px solid #f60 !important;
                }

                .reg_submit{
                    cursor: pointer;
                    border: none;
                    display: inline-block;
                    width: 100%;
                    background: #f60;
                    padding: 5px;
                    font-size: 24px;
                    border-radius: 25px;
                    flex-wrap: 600;
                    color: white;
                     transition: all 0.5s;
                    &:hover{
                      opacity: .8;
                    }
                }
            }
        }
    }
}

}
</style>
